<template>
    <Page>
        <div class="search">
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="经销商编号" style="flex:0.8">
                    <el-input v-model="params.mchNo" placeholder="请输入" size="small"></el-input>
                </el-form-item>
                <el-form-item label="经销商名称">
                    <el-input v-model="params.mchName" placeholder="请输入" size="small"></el-input>
                </el-form-item>
                <el-form-item label="申请人姓名">
                    <el-input v-model="params.applyName" placeholder="请输入" size="small"></el-input>
                </el-form-item>
                <el-form-item label="账户状态">
                    <el-select v-model="params.mchStatus" placeholder="请选择" style="width:150px;" size="small">
                        <el-option
                            v-for="(item, index) in mchStatusList"
                            :key="index"
                            :label="item"
                            :value="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="认证时间">
                    <el-date-picker
                        v-model="authorDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="changeAuthorDate"
                        :picker-options="dateOption"
                        style="width:230px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchData" size="small">查询</el-button>
                    <el-button type="primary" @click="resetSearch" size="small" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="datalist">
            <div class="table-header"></div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="mchNo" label="经销商编号" align="center"></el-table-column>
                    <el-table-column prop="storeName" label="店铺名称" align="center"></el-table-column>
                    <el-table-column prop="applyName" label="联系人" align="center"></el-table-column>
                    <el-table-column prop="mchAccount" label="手机号码" align="center" width="100"></el-table-column>
                    <el-table-column prop="mchTypeText" label="商家类型" align="center" width="100"></el-table-column>
                    <el-table-column prop="authMsg" label="认证信息" align="center"></el-table-column>
                    <el-table-column prop="mchRate" label="分成配比" align="center" width="270">
                        <template slot-scope="scope">
                            <el-row>
                                <el-col :span="9" style="display:flex;align-items:center;">
                                    <div v-if="scope.row.rate_edit != false" style="display:flex;justify-content:flex-end;width:100%;">
                                        <span style="margin-right:3px;">经销商</span><input type="number" v-model="scope.row.mchRate" style="width:35px;" />%
                                    </div>
                                    <div v-else>
                                        <span style="margin-right:10px;">经销商</span><span style="width:35px;">{{scope.row.mchRate}} %</span>
                                    </div>
                                </el-col>
                                <el-col :span="9" style="display:flex;align-items:center;">
                                    <div v-if="scope.row.rate_edit != false" style="display:flex;justify-content:flex-end;width:100%;">
                                        <span style="margin-right:3px;">平台</span><input type="number" v-model="scope.row.platRate" style="width:35px;" />%
                                    </div>
                                    <div v-else>
                                        <span style="margin-right:10px;">平台</span><span style="width:35px;">{{scope.row.platRate}} %</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-button v-if="scope.row.rate_edit != true" @click="editRateRow(scope.row, scope.$index)" type="text" size="mini">更改</el-button>
                                    <div v-else>
                                        <span style="color:#4DB673;margin-right:5px;cursor:pointer;font-size:12px;" @click="saveRateRow(scope.row, scope.$index)">保存</span>
                                        <span style="cursor:pointer;font-size:12px;" @click="closeRateRow(scope.row, scope.$index)">取消</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="时间" align="center"></el-table-column>
                    <el-table-column prop="mchStatus" label="状态" align="center">
                        <template slot-scope="scope">
                            <span>{{mchStatusList[scope.row.mchStatus]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="220">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.mchStatus != 1" @click="activeDate(scope.row)">激活</el-button>
                            <el-button type="text" size="small" v-else @click="frozenData(scope.row)">冻结</el-button>
                            <router-link :to="{path:'verify/detail', query:{mchNo:scope.row.mchNo}}" style="margin:0px 10px;">详情</router-link>
                            <el-button type="text" size="small" @click="setPassword(scope.row, scope.$index)" v-if="scope.row.mchStatus == 1">重置密码</el-button>
                            <el-button type="text" size="small" v-if="scope.row.mchStatus == 1" @click="showQRImage(scope.row)">收款二维码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <QRImage ref="qrimg"></QRImage>
        <Password ref="passwd"></Password>
    </Page>
</template>
<script>
import Page from "@/components/page/Page";
import QRImage from "./page/QRImage";
import Password from "./page/Password";
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    data(){
        return {
            params: {
                mchNo:null,     // 经销商编号
                mchName:null,   // 经销商名称
                applyName:null, // 申请人姓名
                mchStatus:null,    // 账户状态
                dateBegin:null,     // 开始时间
                dateEnd:null,       // 结束时间
                currPage: 1,
                pageSize: 25,
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            },
            mchStatusList:['待激活', '已激活', '已冻结'],
            authorDate:[],
            dateOption:{
                shortcuts: [{
                    text: '昨天',
                    onClick(picker){
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        console.log(picker);
                        picker.$emit('pick', [date, date]);
                    },
                }, {
                    text: '近七天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            rateData:{
                mchNo:null,
                mchRate:0,
                platRate:0,
            },
        }
    },
    computed:{
        ...mapState(['mchType']),
    },
    mounted() {
        this.initData();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/altmch/list', {params:this.params}).then(result => {
                if(result.code == 200){
                    if(result.data.list != null){
                        result.data.list.map((item, index) => {
                            item.rate_edit = false;
                        });
                    }
                    this.listData = result.data
                }else {
                    this.$message.error(result.msg);
                }
            });
        },
        // 修改日期
        changeAuthorDate(e){
            this.authorDate = e;
            const [dateBegin, dateEnd] = e;
            this.params.dateBegin = dateBegin;
            this.params.dateEnd = dateEnd;
        },
        // 设置分成比例
        editRateRow(item, index){
            this.listData.list.map((item, index) => {
                item.rate_edit = false;
            });
            for (let i in this.rateData){
                this.rateData[i] = item[i];
            }
            item.rate_edit = true;
        },
        // 关闭编辑分成比例
        closeRateRow(item, index){
            item.rate_edit = false;
        },
        // 保存分成比例
        saveRateRow(item, index){
            for (let i in this.rateData){
                this.rateData[i] = item[i];
            }
            this.$http.post('/api/altmch/setConfig', this.rateData).then(result => {
                if(result.code == 200){
                    item.rate_edit = false;
                    this.$message.success({
                        message:result.msg,
                        onClose:_ => {
                            this.initData();
                        }
                    });
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 冻结数据
        frozenData(item){
            this.$confirm('确认要执行该操作吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal:false,
            }).then(result => {
                this.$http.post('/api/altmch/frozen', {mchNo:item.mchNo}).then(result => {
                    if (result.code == 200){
                        this.$message.success(result.msg);
                        this.initData();
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            });
        },
        // 激活数据
        activeDate(item){
            this.$confirm('确认要执行该操作吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal:false,
            }).then(result => {
                this.$http.post('/api/altmch/active', {mchNo:item.mchNo}).then(result => {
                    if (result.code == 200){
                        this.$message.success(result.msg);
                        this.initData();
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            });
        },
        // 设置密码
        setPassword(item, index){
            this.$refs.passwd.openDialog(item, index);
        },
        // 显示二维码
        showQRImage(item){
            this.$refs.qrimg.showDialog(item);
        },
        // 查询数据
        searchData(e){
            this.params.currPage = 1;
            this.initData();
        },
        // 重置查询
        resetSearch(e){
            ['mchNo','mchName','applyName','mchStatus','dateBegin','dateEnd'].forEach((item, index) => {
                this.params[item] = null;
            });
            this.authorDate = [];
            this.params.currPage = 1;
            this.initData();
        },
        // 分页点击
        changePage(e){
            this.params.currPage = e;
            this.initData();
        },
    },
    components:{
        Page,
        QRImage,
        Password
    }
}
</script>
<style lang="less" scoped>
.page{

}
</style>
